<!--
 * @Author: jiu yin
 * @Date: 2024-04-11 10:50:32
 * @LastEditTime: 2024-04-25 14:14:53
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \web-smart-tour\src\pagesA\ar_navigation\components\showModal.vue
 * jiu
-->
<template>

   <uni-popup ref="popup" class="z-999">
      <view class="ar_showModal_title_bg w-540rpx p-32rpx pt-none box-border border-rd-32rpx">
         <view class="pt-178rpx text-#666666 text-size-28rpx"> {{ scenic_detail.description }}</view>
         <button class="but_bg1 h-80rpx border-rd-40rpx text-size-30rpx text-#0CCA92 font-700 mt-24rpx mb-20rpx"
            @click="free" v-if="!spotAuth.experience">免费体验5分钟</button>
         <button class="but_bg2 h-80rpx border-rd-40rpx text-size-30rpx text-#fff font-700 mt-24rpx mb-20rpx"
            @click="pay">¥{{ spotArGoods_obj.sale_price }} {{ spotArGoods_obj.title }}</button>
         <image src="https://resources.ym2meta.com/web-smart-tour/close.png"
            class="absolute left-50% bottom--104rpx translate-x--50% w-72rpx h-72rpx" @click="close"></image>
      </view>

   </uni-popup>

</template>

<script>
import { navigateTo, navigateBack } from "@/hooks"

export default {
   props: ["spotAuth", "spotArGoods_obj"],
   data() {
      return {
         navigateTo,
         scenic_detail: JSON.parse(uni.getStorageSync('scenic_detail')) || {},
      }
   },
   onLoad(options) {

   },

   mounted() {

   },
   methods: {
      open() {
         this.$refs.popup.open('center')
      },
      close() {
         this.$refs.popup.close()
      },
      free() {
         this.$emit("free")
      },

      pay() {
         this.$emit("pay")
      },
   }
}
</script>


<style lang="scss">
.ar_showModal_title_bg {
   position: relative;
   background-color: #fff;

   &::before {
      content: "";
      width: 100%;
      height: 180rpx;
      position: absolute;
      left: 0;
      top: -44rpx;
      background: url("https://resources.ym2meta.com/web-smart-tour/ar_modal.png") no-repeat top left;
      background-size: 100% 180rpx;
   }

   .but_bg1 {
      background: linear-gradient(90deg, rgba(33, 188, 145, 0.2) 0%, rgba(183, 228, 71, 0.2) 100%);
   }

   .but_bg2 {
      background: linear-gradient(90deg, #0FBCD6 0%, #0CCA91 100%);

   }
}
</style>
